<template>
  <div class="filter-goods">
    <div class="filter-goods" v-for="(goods, index) of allGoods" :key="index">
      <h1>{{goods.topicName}}</h1>
      <p>{{goods.content}}</p>
      <div class="goods-detail">
        <div class="goods-img">
          <img :src="goods.pic" alt="商品图片示例">
          <div class="collect-icon">
            <img :src="goods.isCollect ? collected : collect" alt="收藏图标">
          </div>
        </div>
        <div class="goods-info">
          <h1>{{goods.name}}&nbsp;{{goods.year}}</h1>
          <p>产地：{{goods.origin}}</p>
          <p>等级：{{goods.grade}}</p>
          <p>酒庄出厂价：<span v-if="hasHeader">{{goods.o_price | filterNull}}</span><router-link v-else to="/login">登录可见</router-link></p>
          <p>国内现货价：<span v-if="hasHeader">{{goods.price | filterNull}}</span><router-link v-else to="/login">登录可见</router-link></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import collect from '../assets/picture/collect-origin.png'
  import collected from '../assets/picture/collected-origin.png'

  export default {
    name: 'originalGoods',
    data () {
      return {
        hasHeader: '',
        collect: collect,
        collected: collected,
        allGoods: [
          {topicName: '可杀菌和感到骄傲', content: '回答三个大数据都嘎哈是的噶客户是的噶时候看到噶考试大纲汉库克', isCollect: false, pic: '', name: 'chdeasdjh dashmndga dasjh', year: '1997', origin: '波尔多', grade: 'PDO', o_price: '45', price: '465'}
        ]
      }
    },
    created () {
      this.hasHeader = this.$utils.getCookie('USER_NAME')
    },
    filters: {
      filterNull (index) {
        return !index ? '' : index
      }
    }
  }
</script>
